import { DefaultThumbnail, LiveIcon, ViewersIcon, GamepadIcon, UserIcon } from '@/components/icons';

export const metadata = {
    title: '关注直播 | 在线直播平台',
    description: '查看您关注的主播直播动态',
};

export default function FollowingPage() {
    return (
        <div className="py-10">
            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                {/* Online Streamers */}
                <div className="mb-8">
                    <h2 className="text-2xl font-bold text-white mb-4">正在直播</h2>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                        {[1, 2, 3, 4].map(item => (
                            <div key={item} className="bg-gray-800 rounded-lg overflow-hidden">
                                <div className="aspect-video bg-gray-700 relative">
                                    <div className="absolute inset-0 flex items-center justify-center">
                                        <DefaultThumbnail className="w-16 h-16 text-gray-600" />
                                    </div>
                                    <div className="absolute top-2 left-2">
                                        <span className="inline-flex items-center rounded-md bg-red-500 px-2 py-1 text-xs font-medium text-white">
                                            <LiveIcon className="w-4 h-4 mr-1" />
                                            直播中
                                        </span>
                                    </div>
                                    <div className="absolute bottom-2 right-2">
                                        <span className="inline-flex items-center rounded-md bg-black/60 px-2 py-1 text-xs font-medium text-white">
                                            <ViewersIcon className="w-4 h-4 mr-1" />
                                            {Math.floor(Math.random() * 10 + 1)}K 观众
                                        </span>
                                    </div>
                                </div>
                                <div className="p-4">
                                    <h3 className="font-medium text-white">直播标题 {item}</h3>
                                    <div className="flex items-center space-x-2 mt-1">
                                        <UserIcon className="w-4 h-4 text-gray-400" />
                                        <p className="text-sm text-gray-400">主播 {item}</p>
                                    </div>
                                    <div className="flex items-center space-x-2 mt-1">
                                        <GamepadIcon className="w-4 h-4 text-gray-500" />
                                        <p className="text-sm text-gray-500">正在玩 游戏名称</p>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Offline Streamers */}
                <div>
                    <h2 className="text-2xl font-bold text-white mb-4">离线主播</h2>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                        {[1, 2, 3, 4].map(item => (
                            <div key={item} className="bg-gray-800 rounded-lg overflow-hidden">
                                <div className="p-4 flex items-center space-x-4">
                                    <div className="flex-shrink-0">
                                        <div className="h-10 w-10 rounded-full bg-gray-700 flex items-center justify-center">
                                            <UserIcon className="w-6 h-6 text-gray-500" />
                                        </div>
                                    </div>
                                    <div className="flex-1 min-w-0">
                                        <p className="text-sm font-medium text-white truncate">
                                            主播 {item}
                                        </p>
                                        <p className="text-sm text-gray-400">上次直播：2小时前</p>
                                    </div>
                                    <button className="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-gray-600">
                                        已关注
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}
